<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>幸运大转盘</title>
	<script type="text/javascript" src="js/rem.js"></script>
	<link rel="stylesheet" href="css/index.css">
</head>

<body class="indexbg">
	<div class="lucky-draw">
		<div class="lucky-title">
			<span class="lucky-description">中奖说明</span>
			<span class="lucky-myprice">我的奖品</span>
		</div>
		<div class="lucky-draw-main">
			<div class="lucky-draw-turn-table"></div>
			<div class="lucky-draw-pointer"></div>
			<div class="lucky-draw-pointer-veil none"></div>
		</div>
		<div class="lucky-draw-tips">您的可抽奖次数<span>10</span>次</div>
		<div class="lucky-draw-tab"><a href="#"><img src="images/tab1.png"></a><a href="javascript:void(0);"><img
					src="images/tab2.png"></a><a href="#"><img src="images/tab3.png"></a><a href="#"><img
					src="images/tab4.png"></a></div>
	</div>
	<div class="cover">
		<div class="cover-bg"></div>
		<div class="pop pop1">
			<!--中奖弹出窗-->
			<div class="cover-main">
				<div class="cover-text">恭喜您中了<span>特等奖!</span></div>
				
			</div><div class="cover-close">关闭</div>
		</div>
		<!--中奖说明弹出窗-->
		<div class="pop pop2">
			<div class="cover-main2">
				<p>1、5元、10元、20元、50元现金红包</p>
				<p>领取的奖品为虚拟红包，活动结束后所有抽中红包的累积金额，将会在活动结束后60天内以工资的形式返到您的工资卡。</p>
				<p>2、2000积分</p>
				<p>您获得的2000积分将会返到您的屈臣氏员工会员卡中。如您还没有员工卡或员工卡丢失不可用，请致电020-28336829登记您的其他会员卡。</p>
				<p>3、华为 HUAWEI P30 Pro</p>
				<p>华为 HUAWEI P30 Pro一台，我们会通过您的员工手机号在7个工作日内电话联系您获取您的快递地址，核实您的中奖工号，将奖品活动结束后30天内快递给您。</p>
			</div>
			<div class="cover-close">关闭</div>
		</div>
		<!--我的奖品弹出窗-->
		<div class="pop pop3">
			<div class="cover-main3">				
				<div class="head"><span>奖品</span><span>数量</span></div>
				<div class="word-scroll">
				<div class="item"><span><i><img src="images/hongbao.png"></i>50元红包</span><span>3份</span></div>
				<div class="item"><span><i><img src="images/hongbao.png"></i>20元红包</span><span>10份</span></div>
				<div class="item"><span><i><img src="images/iphone.png"></i>华为 HUAWEI P30 Pro</span><span>1份</span></div>
				<div class="item"><span><i><img src="images/hongbao.png"></i>10元红包</span><span>20份</span></div>
				<div class="item"><span><i><img src="images/intergrl.png"></i>2000积分</span><span>4份</span></div>
				<div class="item"><span><i><img src="images/hongbao.png"></i>5元红包</span><span>100份</span></div></div>
			</div>
			<div class="cover-close">关闭</div>
		</div>
	</div>
	<script src="js/jquery1.11.3.min.js"></script>
	<script>
		var resultList = [{
				name: '5元红包'
			},
			{
				name: '新款手机'
			},
			{
				name: '2000积分'
			},
			{
				name: '50元红包'
			},
			{
				name: '20元红包'
			},
			{
				name: '10元红包'
			}
		]
		var deg = 0;
		var num_app = 0;
		var num_last = 0;
		$(".lucky-draw-pointer").click(function () {
			//var num = Math.ceil(Math.random() * 7); //1到7的随机数
			var num = Math.ceil(Math.random() * 5); //1到5的随机数
			console.log('传值：' + num)
			// 2 = 5-3
			num_app = num - num_last;
			//deg = 45 * num_app + 360 * 4 + deg; //旋转的角度
			deg = 60 * num_app + 360 * 4 + deg; //旋转的角度
			num_last = num;
			console.log('当前：' + num_last)
			$('.lucky-draw-turn-table').css({
				"transform-origin": "center center",
				"transition": "all 5s cubic-bezier(0, 0, 0.1,0.99)",
				"transform": "rotate(" + deg + "deg)" //旋转的角度，360为1圈
			});
			$(".lucky-draw-pointer-veil").removeClass("none")
			setTimeout(function () {
				$(".lucky-draw-pointer-veil").addClass("none");
				$('.cover-text span').text(resultList[num].name + '!')
				$('.cover').fadeIn();
				$(".pop1").show();
			}, 5000)
		});


		$('.lucky-description').click(function () {
			$('.cover,.cover-bg').fadeIn();
			$(".pop2").show();
		});
		$('.lucky-myprice').click(function () {
			$('.cover,.cover-bg').fadeIn();
			$(".pop3").show();
		});
		$('.cover-close').click(function () {
			$('.cover').fadeOut();
			$(".pop1").hide();
			$(".pop2").hide();
			$(".pop3").hide();
		})
	</script>
</body>

</html>